<template>
  <div class="wrap">
    <!-- nav end -->
    <div class="banner">
      <ul id="naviSlider">
        <li sindex="1" class="on"></li>
        <li sindex="2" ></li>
        <li sindex="3" ></li>
      </ul>
      <ul id="slider" class="layui-carousel">
        <div carousel-item>
        <li>
          <img src="@/assets/upfiles/beijin.jpg"/>
       </li>
        <li>
          <img src="@/assets/upfiles/bj2.jpg"/>
        </li>
        </div>
      </ul>
    </div>
    <!-- banner end -->
    <div class="content">
      <div class="box mt20">
        <div class="gsjj left">
          <h2><img src="@/assets/upfiles/gsjj.png" alt="公司简介"></h2>
          <div class="jjcon">
            <p>学远培训有限公司成立于2007年，学远培训有限公司成立于2007年，学远培训有限公司成立于2007年，学远培训有限公司成立于2007年，<a href="gsjj"><span style=" color:#3da37c;">[查看详情]</span></a></p>
          </div>
        </div>
        <div class="xwdt left">
          <h2><a href="news.html"><img src="@/assets/upfiles/xwdt.png" alt="新闻动态"></a></h2>
          <div class="dtcon">
            <ul>
              <li><span class="rq">【02-29】</span><a href="#">thinkphp5开发手册出现</a></li>
              <li><span class="rq">【02-29】</span><a href="#">thinkphp5开发手册出现</a></li>
              <li><span class="rq">【02-29】</span><a href="#">thinkphp5开发手册出现</a></li>
              <li><span class="rq">【02-29】</span><a href="#">thinkphp5开发手册出现</a></li>
            </ul>
          </div>
        </div>
        <div class="lxwm right">
          <h2><img src="@/assets/upfiles/lxwm.png" alt="联系我们"></h2>
          <div class="lxcon"> <strong>学远培训有限公司</strong><br />
            地址：安徽信息工程学院<br />
            联系人：潘经理<br />
            电话：0371-687666666<br />
            手机：17355370221<br />
            邮箱：919819426@qq.com </div>
        </div>
        <div class="clear"></div>
      </div>
      <!-- box end -->
      <div class="cpzs mt10">
        <h2>
          <a href="#">
            <img src="@/assets/upfiles/kczs2.jpg" alt="课程展示">
          </a>
        </h2>
        <div class="cpcon">
          <ul>
            <li>
              <a href="">
                <img src="@/assets/upfiles/java1.jpg" alt="" />
                <p>java</p>
              </a></li>
            <li><a href="#"><img src="@/assets/upfiles/jqery.jpg" alt="" />
              <p>jQuery</p>
            </a></li>
            <li><a href="#"><img src="@/assets/upfiles/php.jpg" alt="" />
              <p>php</p>
            </a></li>
            <li><a href="#"><img src="@/assets/upfiles/html.jpg" alt="" />
              <p>html</p>
            </a></li>
          </ul>
          <div class="clear"></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
    export default {
        name: "Home",
        data(){
            return {
                // 定义数据
                apiUrl: 'https://api.github.com/users'
            }
        },
        // 页面加载完成执行这里面的方法，一般用于ajax请求数据接口
        mounted(){
            console.log('一进入页面我就执行')
            // fetch(this.apiUrl).then(function(res){
            //     to do something
            // })

            // fetch是浏览器自带的用于请求方法, 请求后台接口数据
            fetch(this.apiUrl).then(res => {
                return res.json() // 这里需要return 一次, 代表返回json格式的数据
            }).then(res=>{
                console.log('接口',res)
            })
        },
        methods: {
            goGsjj(){
                // 使用js方式跳转页面
                this.$router.push('/gsjj')
            }
        }
    }
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        var ins = carousel.render({
            elem: '#slider',
            width: '100%',//设置容器宽度
            height: '100%',
            autoplay: true ,     //自动切换
            arrow: 'always', //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

<style lang="stylus" scoped>

</style>
